<template>
  <div>
      <t-dialog :header="title" :visible="bodyVisible3" :footer="false" :onClose="bodyClose2">
        <div slot="body">
              <t-form :data="formData" ref="form" @reset="onReset" @submit="onSubmit" :colon="true">
                <t-form-item label="开局剧本" name="start">
                   <t-textarea
                    v-model="formData.start"
                    placeholder="请输入开局剧本"
                    name="description"
                    />
                </t-form-item>
                <t-form-item :label="'第' + item.index + '幕'" name="tag" v-for="(item,index) in arr" :key="index">
                   <t-textarea
                    v-model="formData[item.variable]"
                    placeholder="请输入描述文案"
                    name="description"
                    />
                </t-form-item>
                <t-form-item style="padding-top: 8px">
                    <t-button theme="primary" type="submit" style="margin-right: 10px">提交</t-button>
                    <t-button theme="default" variant="base" type="reset">重置</t-button>
                </t-form-item>
            </t-form>
        </div>
      </t-dialog>
  </div>
</template>

<script>
const INITIAL_DATA = {
  start: '', // 开局剧本
};
export default {
    props: {
        title: {
            type: String,
        },
        tent: {
            type: String,
        }
    },
    data() {
        return {
            bodyVisible3: false, // 弹框开关
            formData: { ...INITIAL_DATA },
            arr: [] // 遍历后的数据
        }
    },
    mounted () {
        this.datawith()
    },
    watch:{
        tent () {
            this.datawith()
        }
    },
    methods: {
        // 数据处理
        datawith () {
            // const arr = []
            for(let i = 0; i < Number(this.tent); i++) {
                this.arr.push({
                    variable: 'screen' + i,
                    index: i + 1
                })
                // console.log(1);
            }
        },

        onSubmit () {
            // 提交
            this.$message.success('定义成功')
            this.bodyVisible3 = false;
            this.$emit('tag', this.formData.tag)
        },

        onReset () {
            // 重置
            this.$message.success('重置成功');
        },

        // 关闭
        bodyClose2 () {
            this.arr = []
            this.bodyVisible3 = false;
        }
    }
}
</script>

<style>

</style>